@use "styles/BoxShadow.module.scss";
@use "styles/Radius.module.scss";
@use "styles/ScreenSizes.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Typography.module.scss";

.brain_snippet_wrapper {
  display: flex;
  width: 375px;
  flex-direction: column;
  gap: Spacings.$spacing05;
  justify-content: center;
  align-items: center;
  padding-top: Spacings.$spacing06;
  box-shadow: BoxShadow.$large;
  border-radius: Radius.$normal;
  background-color: var(--background-0);
  border: 1px solid var(--border-1);

  @media screen and (max-width: ScreenSizes.$small) {
    width: 250px;
  }

  .sample_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: Radius.$normal;
    width: 64px;
    height: 64px;
    font-size: Typography.$very_large;
  }

  .selector_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tabs {
      width: 100%;
    }
  }

  .button {
    align-self: flex-end;
    padding: Spacings.$spacing05;
    padding-top: 0;
  }
}
